<template>
    <rx-dialog @handOk="okFun" @cancel="cancelFun">
        <div class="OsUserViewPermission">
            <div class="OsUserViewPermission-head">
                <div class="OsUserViewPermission-head-img">
                    <img class="userImg" :src="imgUrl"/>
                </div>
                <span style="color: #303030;font-size: 14px;">{{fullName}}</span>
            </div>
            <div class="OsUserViewPermission-common">
                <div class="OsUserViewPermission-common-list">
                    <div class="user-list">
                        <div class="user-list-le">
                            {{i18n('form.mainDepName','主部门')}}
                        </div>
                        <div class="user-list-ri">
                            <a-button v-if="userGroup.mainDep.groupId"  @click="getPermissionsByGroupId('mainDep',userGroup.mainDep.groupId,userGroup.mainDep.groupName)"
                                       :type="getPrimary('mainDep'+userGroup.mainDep.groupId)"
                            >
                                {{userGroup.mainDep.groupName}}
                            </a-button>
                        </div>
                    </div>
                    <div class="user-list" v-if="userGroup.hasOwnProperty('userType')">
                        <div class="user-list-le">
                            {{i18n('form.userType','用户类型')}}
                        </div>
                        <div class="user-list-ri">
                                <div class="osUserTypeNameStyle">
                                    {{userGroup.userType.typeName}}
                                </div>
                                <a-button @click="getPermissionsByGroupId('userType',item.groupId,item.groupName)"
                                          v-for="(item,index) in userGroup.userType.groups"
                                          :key="index"
                                          :type="getPrimary('userType'+item.groupId)"
                                          style="margin-right: 10px">
                                    {{item.groupName}}
                                </a-button>

                        </div>
                    </div>
                    <div class="user-list" v-for="(dimItem,index) in userGroup.dimList" :key="index">
                        <template v-if="dimItem.groups && dimItem.groups.length>0">
                            <div class="user-list-le" >
                                {{ dimItem.dimName }}
                            </div>
                            <div class="user-list-ri">
                                <a-button @click="getPermissionsByGroupId('dim',group.groupId,group.groupName)"
                                          v-for="(group,index) in dimItem.groups" :key="index" style="margin-right: 10px"
                                          :type="getPrimary('dim'+group.groupId)"
                                >
                                    {{group.groupName}}
                                </a-button>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="OsUserViewPermission-common-list OsUserViewPermission-common-list-li">
                    <div v-if="primaryName">
                        <div>
                            <span style="font-weight: bold;">[{{depName}}]</span>{{i18n('form.resource','资源权限')}}
                        </div>
                        <a-tree :treeData="permissionsByGroupIdTree"/>
                    </div>
                    <div class="OsUserViewPermission-common-list-empty" v-else>
                        <div>
                            <a-empty />
                            <div style="font-size: 16px;margin-top: 23px">
                                {{i18n('form.tips','点击左侧组或部门即可查看对应的资源权限')}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="OsUserViewPermission-common-list OsUserViewPermission-common-list-li">
                    <div >
                        <div>
                            {{i18n('form.resourceAll','所有资源权限')}}
                        </div>
                        <a-tree :treeData="permissionsTree"/>
                    </div>
                </div>
            </div>
        </div>
    </rx-dialog>
</template>

<script>
    import {BaseFormModel,RxDialog,Util,TokenUtil,RxGrid} from "@lowcode/jpaas-common-lib";
    import OsUserApi from '@/api/user/org/osUser'

    export default {
        name: 'OsUserViewPermission',
        mixins: [BaseFormModel],
        components: {
            RxDialog
        },
        props: {
            //从osUserList.vue（父组件）获取到的
            userId: String,
            fullName: String
        },
        data() {
            return {
                //头像
                imgUrl: require('@img/avatar2.jpg'),
                //显示相应的权限
                permissionsTree: [],

                permissionsByGroupIdTree: [],

                userGroup:{
                    //显示相应的主部门，用户类型，行政组织，角色，职务
                    dimList:{},
                    //用户类型
                    userType:{},
                    //主部门
                    mainDep:[],
                },
                //点击按钮的部门名称
                depName:'',
                //控制样式
                primaryName:'',
            }
        },
        created(){
            this.loadAppMenus();
            let self_=this;
            //加载该用户对应的主部门，用户类型，行政组织，角色，职务
            OsUserApi.getOsUserPermissionByUserId(this.userId).then(data=>{
                self_.userGroup=data;
                self_.handleuserGroup();
            });
        },
        methods:{
            handleuserGroup(){
                if(!this.userGroup.dimList || !this.userGroup.mainDep || !this.userGroup.mainDep.groupId){
                    return;
                }
                let mainDepId=this.userGroup.mainDep.groupId;

                let dim=this.userGroup.dimList.find(item =>{
                    return item.dimId=="1";
                });
                if(!dim || !dim.dimId || !dim.groups){
                    return;
                }
                for(let i=0;i<dim.groups.length;i++){
                    if(mainDepId==dim.groups[i].groupId){
                        dim.groups.splice(i,1);
                        return;
                    }
                }
            },
            getPrimary(obj){
                if(obj == this.primaryName){
                    return 'primary'
                }else {
                    return false
                }
            },
            i18n(name,text,key){
                return this.$ti18(name,text,"osUser",key);
            },
            okFun() {
                Util.closeWindow(this, "ok");
            },
            cancelFun() {
                Util.closeWindow(this, "cancel");
            },
            getPermissionsByGroupId(label,groupId, groupName) {
                let self_ = this;
                this.primaryName = label+groupId;
                self_.depName = groupName
                OsUserApi.getPermissionsByGroupId(groupId).then(res => {
                    self_.permissionsByGroupIdTree = [];
                    var menuList=[];
                    res.forEach(item => {
                        menuList.push({
                            key: item.menuId,
                            title: self_.$i18(item.name,'菜单名称'),
                            parentId: item.parentId,
                        })
                    })
                    var treeData=Util.listToTree(menuList,"key","parentId");
                    self_.permissionsByGroupIdTree = treeData
                })
            },

            //加载菜单
            loadAppMenus() {
                let self_ = this;
                let userId = self_.userId
                OsUserApi.getOsUserPermission(userId).then(res => {
                    self_.permissionsTree = [];
                    var menuList=[];
                    res.forEach(item => {
                        menuList.push({
                            key: item.id,
                            title: self_.$i18(item.name,'菜单名称'),
                            parentId: item.parentId,
                        })
                    })
                    var treeData=Util.listToTree(menuList,"key","parentId");
                    self_.permissionsTree = treeData
                })
            },
            getFilePath(fileId) {
                if (fileId && fileId != '') {
                    let token = TokenUtil.getToken();
                    fileId=Util.encryptWord(fileId)
                    this.imgUrl = '/api/api-system/system/core/sysFile/previewFile?fileId=' + fileId + '&accessToken=' + token
                }
            },
        }
    }
</script>
<style scoped lang="less">
.OsUserViewPermission{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.OsUserViewPermission-head{
    height: 64px;
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #eeeeee;
    display: flex;
    align-items: center;
}
.OsUserViewPermission-head-img{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin-left: 20px;
    margin-right: 13px;
    .userImg{
        width: 100%;
    }
}
.OsUserViewPermission-common{
    flex: 1;
    display: flex;
    border-radius: 4px;
    border: solid 1px #eeeeee;
    margin-top: 10px;
    border-right: none;
    .OsUserViewPermission-common-list{
        flex: 1;
        border-radius: 4px;
        border-right: solid 1px #eeeeee;
        padding:30px 0px;
    }
}
.user-list{
    display: flex;
}
.user-list-le{
    width: 110px;
    padding-left: 30px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-weight: bold;
    color: #303030;
}
.user-list-ri{
    flex: 1;
}
.user-list-ri button{
    margin-bottom: 10px;
}
.osUserTypeNameStyle{
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #303030;
}
.OsUserViewPermission-common-list-li{
    padding: 30px!important;
}
.OsUserViewPermission-common-list-empty{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
</style>

